import React, { memo, useMemo } from 'react';
import { Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useVirtualList } from '../hooks/useVirtualList';

interface VirtualizedTableProps {
  data: any[];
  columns: ColumnsType<any>;
  rowKey?: string;
  height?: number;
  rowHeight?: number;
  loading?: boolean;
}

export const VirtualizedTable: React.FC<VirtualizedTableProps> = memo(({
  data,
  columns,
  rowKey = 'id',
  height = 400,
  rowHeight = 54,
  loading = false
}) => {
  const virtualList = useVirtualList(data, {
    itemHeight: rowHeight,
    containerHeight: height,
    overscan: 5
  });

  // 为大量数据使用虚拟化表格
  if (data.length > 100) {
    return (
      <div style={{ border: '1px solid #f0f0f0', borderRadius: 4 }}>
        <div style={{ padding: '8px 16px', borderBottom: '1px solid #f0f0f0', fontWeight: 500 }}>
          数据总数: {data.length} 条 (虚拟化渲染)
        </div>
        <div {...virtualList.scrollElementProps}>
          <div style={{ height: virtualList.list.totalHeight, position: 'relative' }}>
            <div
              style={{
                transform: `translateY(${virtualList.list.offsetY}px)`,
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
              }}
            >
              {virtualList.list.items.map(({ data: item, index }) => (
                <div
                  key={item[rowKey]}
                  style={{
                    height: rowHeight,
                    borderBottom: '1px solid #f0f0f0',
                    display: 'flex',
                    alignItems: 'center',
                    padding: '0 16px'
                  }}
                >
                  <div style={{ marginRight: 16, width: 40, color: '#999', fontSize: 12 }}>
                    #{index + 1}
                  </div>
                  {item.cityName && (
                    <Tag color="blue" style={{ marginRight: 8 }}>
                      {item.cityName}
                    </Tag>
                  )}
                  {item.temperature && (
                    <span style={{ marginRight: 16 }}>
                      温度: {item.temperature.toFixed(1)}°C
                    </span>
                  )}
                  {item.humidity && (
                    <span style={{ marginRight: 16 }}>
                      湿度: {item.humidity.toFixed(1)}%
                    </span>
                  )}
                  {item.recordedAt && (
                    <span style={{ color: '#999', fontSize: 12 }}>
                      {new Date(item.recordedAt).toLocaleString('zh-CN')}
                    </span>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // 对于小量数据，使用普通表格
  return (
    <Table
      dataSource={data}
      columns={columns}
      rowKey={rowKey}
      loading={loading}
      scroll={{ y: height }}
      pagination={false}
      size="small"
    />
  );
});

VirtualizedTable.displayName = 'VirtualizedTable';

export default VirtualizedTable;